import React,{ useEffect  } from 'react'
import { useDispatch, useSelector } from "react-redux";
import { Select } from 'antd'
import { getChannels } from '@/store/actions'
// 设计props!!!
// width 宽度
// value 显示的数据
// onChange 修改的时候触发
const Channel = ({width,value,onChange}) => {
  const dispatch = useDispatch()
  ////////////////////////////////获取频道数据
  const { channels } = useSelector(state=>state.articles)
  useEffect(()=>{
    dispatch(getChannels())
  },[dispatch])


  return (
    <Select  value={value} onChange={ (e)=>onChange(e) } placeholder="请选择所属频道"
              style={width ? { width } : null}>
      {channels.map((item) => {
        return (
          <Select.Option key={item.id} value={item.id}>
            {item.name}
          </Select.Option>
        );
      })}
    </Select>
  )
}
export default Channel
// <Channel width={220} value={123} onChange={ (e)=>console.log(e) }>